<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="../../image/icon_mamma.ico">
<script src="../../js/jquery-2.1.1.js"></script>
<script type="text/javascript">
function formCheck(){
	var name = $('#name');
	if(name.val() == ''){
		$('html, body').animate({
			scrollTop: '0px'
		}, 'slow');
		name.focus();
		return false;
	}
	
	var email = $('#email');
	if(email.val() == ''){
		$('html, body').animate({
			scrollTop: '0px'
		}, 'slow');
		email.focus();
		return false;
	}
	
	var password = $('#password');
	if(password.val() == ''){
		$('html, body').animate({
			scrollTop: '0px'
		}, 'slow');
		password.focus();
		return false;
	}
	
	var nickname = $('#nickname');
	if(nickname.val() == ''){
		$('html, body').animate({
			scrollTop: '0px'
		}, 'slow');
		nickname.focus();
		return false;
	}
	
	var agree = $('#agree');
	if(agree.is(':checked') == false){
		$('span.font').css('color', 'red');
		agree.focus();
		return false;
	}
}


// this is occured when the page is loaded.
$(document).ready(function(){
	// if textfields is focused, they will be appear.
	$('#name').focus(function(){
		var html = "";
		html += '성과 이름을 입력하세요.';
		
		$('div.name').css('display', 'block');
		$('div.name').html(html);
		$('div.name').css('color', 'gray');
	});
	
	$('#email').focus(function(){
		var html = "";
		html += '이메일 주소를 입력하세요.';
		
		$('div.loading').css('display', 'none');
		$('div.email').css('display', 'block');
		$('div.email').html(html);
		$('div.email').css('color', 'gray');
	});
	
	$('#password').focus(function(){
		var html = "";
		html += '6자 이상! 어렵게!';
		
		$('div.password').css('display', 'block');
		$('div.password').html(html);
		$('div.password').css('color', 'gray');
	});
	
	$('#nickname').focus(function(){
		var html = "";
		html += '걱정마세요. 나중에 변경할 수 있습니다';
		
		$('div.nickname').css('display', 'block');
		$('div.nickname').html(html);
		$('div.nickname').css('color', 'gray');
	});
	
	$('#state').focus(function(){
		var html = "";
		html += '지금 거주 중인 곳을 선택해주세요.'
		
		$('div.state').css('display', 'block');
		$('div.state').html(html);
		$('div.state').css('color', 'gray');
	});
	
	$('#policy').focus(function(){
		$('#policy').animate({
			height: '400px'
		}, 'slow');
		$('html, body').animate({
			scrollTop: '600px'
		}, 'slow');
		$('#main').animate({
			height: '1000px'
		}, '');
		$('.signup').animate({
			height: '1000px'
		}, 'slow');
	});
	
	// when the loading of this page is done, focus the name field.
	$('#name').focus();
	
	// events
	$('#name').blur(function(){
		var html = "";
		
		if($('#name').val().length == 0){
			html = "<i class='fa fa-times'></i> 이름은 필수 입력사항입니다!";
			
			$('div.name').css('display', 'block');
			$('div.name').html(html);
			$('div.name').css('color', 'red');
		}
		else {
			html = "<i class='fa fa-check'></i> 좋습니다";
			
			$('div.name').css('display', 'block');
			$('div.name').html(html);
			$('div.name').css('color', '#00CC00');
		}
	});
	
	$('#email').blur(function(){
		var html = "";
		
		if($('#email').val().length == 0){
			html = "<i class='fa fa-times'></i> 이메일은 필수 입력사항입니다!";
			
			$('div.email').css('display', 'block');
			$('div.email').html(html);
			$('div.email').css('color', 'red');
		}
		else if($('#email').val().indexOf('@') == -1 || $('#email').val().indexOf('\.') == -1){
			html = "<i class='fa fa-times'></i> 유효한 이메일 주소가 아닙니다!";
			
			$('div.email').css('display', 'block');
			$('div.email').html(html);
			$('div.email').css('color', 'red');
		}
		else {
			$('div.email').css('display', 'none');
			$('div.loading').css('display', 'block');
			
			$.ajax({
				url: '../../member/emailCheck.action'
				, type: 'POST'
				, dataType: 'json'
				, data: { email: $('#email').val() }
				, error: function(){
					$('div.loading').css('display', 'none');
					
					html = "<i class='fa fa-times'></i> 이미 사용하고 있는 이메일입니다.";
					
					$('div.email').css('display', 'block');
					$('div.email').html(html);
					$('div.email').css('color', 'red');
				}
				, success: function(){
					$('div.loading').css('display', 'none');
					
					html = "<i class='fa fa-check'></i> 사용 가능한 이메일입니다.";
					
					$('div.email').css('display', 'block');
					$('div.email').html(html);
					$('div.email').css('color', '#00CC00');
				}
			});
		}
	});
	
	
	// check the password
	$('#password').keyup(function(){
		var html = "";
		var password = $('#password').val();
		
		if(password.length < 6){
			html += "<i class='fa fa-times'></i> 비밀번호는 최소 6자 이상이 되어야 합니다.";
			
			$('div.password').css('display', 'block');
			$('div.password').html(html);
			$('div.password').css('color', 'red');
		}
		else if(password.length >= 6){
			html = "<i class='fa fa-check'></i> 사용 가능한 비밀번호입니다.";
			
			$('div.password').css('display', 'block');
			$('div.password').html(html);
			$('div.password').css('color', '#00CC00');
		}
	});
	
	$('#password').blur(function(){
		var html = "";
		var password = $('#password').val();
		
		if(password.length < 6){
			html += "<i class='fa fa-times'></i> 비밀번호는 최소 6자 이상이 되어야 합니다.";
			
			$('div.password').css('display', 'block');
			$('div.password').html(html);
			$('div.password').css('color', 'red');
		}
		else if(password.length >= 6){
			html = "<i class='fa fa-check'></i> 사용 가능한 비밀번호입니다.";
			
			$('div.password').css('display', 'block');
			$('div.password').html(html);
			$('div.password').css('color', '#00CC00');
		}
	});
	
	// check the nickname
	$('#nickname').blur(function(){
		var html = "";
		var nickname = $('#nickname').val();
		
		if(nickname == ''){
			html = "<i class='fa fa-check'></i> 닉네임을 등록해주세요!";
			
			$('div.nickname').css('display', 'block');
			$('div.nickname').html(html);
			$('div.nickname').css('color', 'red');
		}
		else {
			html = "<i class='fa fa-check'></i> 모든 활동은 닉네임으로 표시됩니다.";
			
			$('div.nickname').css('display', 'block');
			$('div.nickname').html(html);
			$('div.nickname').css('color', '#00CC00');
		}
	});
	
	// check the state that he or she is living
	$('#state').blur(function(){
		var html = "<i class='fa fa-check'></i> 잘 고르셨죠?";
		
		$('div.state').css('display', 'block');
		$('div.state').html(html);
		$('div.state').css('color', '#00CC00');
	});
	
	// check the agree of our policy
	$('#agree').blur(function(){
		$('span.font').css('color', 'gray');
	});
});
</script>
<style type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body { font-family: 'Nanum Gothic', serif; }
#header {
	z-index: 11;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	box-shadow: 1px 1px 1px #888888;
	background-color: #FF5459;
}

#main {
	margin: 0 auto;
	width: 900px;
	height: 700px;
}

.signup {
	position: absolute;
	margin-top: 50px;
	border-radius: 8px;
	border: 1px solid lightgray;
	width: 900px;
	height: 650px;
}

.form {
	position: absolute;
	width: 700px;
	margin-left: 150px;
	margin-top: 20px;
}

.input, .alert {
	float: left;
}

input[type="text"], input[type="password"] {
	height: 25px;
	width: 390px;
	border-radius: 5px;
	border: 1px solid lightgray;
}

label {
	font-size: 11pt;
	font-weight: bold;
	cursor: pointer;
}

.alert {
	display: none;
	font-size: 10pt;
	color: gray;
	margin-top: 8px;
}
.font {
	font-size: 10pt;
	color: gray;
}

input[type="submit"] {
	background: #ffc578; /* Old browsers */
	background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffc578),
		color-stop(100%, #fb9d23)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #ffc578 0%, #fb9d23 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578',
		endColorstr='#fb9d23', GradientType=0); /* IE6-9 */
	height: 40px;
	width: 390px;
	border-radius: 5px;
	border: 1px solid orange;
	cursor: pointer;
	font-weight: bold;
}

#state {
	width: 80px;
	height: 30px;
	font-size: 13pt;
	border-radius: 5px;
	border: 1px solid lightgray;
}

#policy {
	overflow: scroll;
	font-size: 9pt;
	color: gray;
}

.logo {
	text-align: center;
}
.logo .fa-heart {
	color: white;
	font-size: 15pt;
	z-index: 11;
	margin-top: 14px;
	height: 20px;
}
</style>
</head>
<body>
	<div id="header">
		<div class="mainForm header">
			<div class="logo">
				<i class="fa fa-heart"></i>
			</div>
		</div>
	</div>
	<div id="main">
		<div class="signup">
			<div class="form">
				<h2>지금 mamma에 가입하세요.</h2><br>
				
				<form action="../../member/insertAccount.action" class="mamma.action.MemberAction" method="POST" onsubmit="return formCheck();">
					<label class="label" onclick="javascript:$('#name').focus()">이름</label><br>
					<div class="input">
						<input type="text" id="name" name="memberVo.name" />&nbsp;&nbsp;
					</div>
					<div class="alert name"></div>
					<br><br><br>
					
					<label class="label" onclick="javascript:$('#email').focus()">이메일 주소</label><br>
					<div class="input">
						<input type="text" id="email" name="memberVo.email" />&nbsp;&nbsp;
					</div>
					<div class="alert loading">
						<img src="../../image/signup/ajax-loader.gif" /> 확인중...
					</div>
					<div class="alert email"></div>
					<br><br><br>
					
					<label class="label" onclick="javascript:$('#password').focus()">비밀번호</label><br>
					<div class="input">
						<input type="password" id="password" name="memberVo.password" />&nbsp;&nbsp;
					</div> 
					<div class="alert password"></div>
					<br><br><br>
					
					<label class="label" onclick="javascript:$('#nickname').focus()">닉네임</label><br>
					<div class="input">
						<input type="text" id="nickname" name="memberVo.nickname" />&nbsp;&nbsp;
					</div> 
					<div class="alert nickname"></div>
					<br><br><br>
					
					<label class="label" onclick="javascript:$('#state').focus()">지역</label><br>
					<div class="input">
						<select id="state" name="memberVo.hometown">
							<option>서울</option>
							<option>경기</option>
							<option>인천</option>
							<option>강원</option>
							<option>충남</option>
							<option>충북</option>
							<option>대전</option>
							<option>세종</option>
							<option>부산</option>
							<option>울산</option>
							<option>대구</option>
							<option>경북</option>
							<option>경남</option>
							<option>광주</option>
							<option>전북</option>
							<option>전남</option>
							<option>제주</option>
						</select>&nbsp;&nbsp;
					</div>
					<div class="alert state"></div>
					<br><br><br>

					<textarea id="policy" rows="5" cols="60" readonly="readonly">본 이용 약관("본 약관")은 귀하가 당사의 각종 웹사이트, SMS, API, 알림 이메일, 애플리케이션, 버튼, 위젯, 광고 및 상거래 서비스를 비롯한 서비스("본 서비스" 또는 “맘마”)뿐만 아니라 본 서비스상에서 업로드 또는 다운로드되거나 보여지는 정보, 문구, 그래픽, 사진 또는 기타 자료(이하 통칭하여 "콘텐츠")에 접근하여 이를 이용하는 행위 일체를 규율합니다. 귀하가 본 서비스에 접근하고 이를 이용하는 행위는 귀하가 본 약관에 동의하고 이를 준수하는 것을 전제로 합니다. 본 서비스에 접근하거나 본 서비스를 이용함으로써, 귀하는 본 약관에 구속되는 것에 동의합니다.
1. 기본약관
귀하는 귀하가 본 서비스를 이용하는 행위, 본 서비스에 게시하는 콘텐츠 및 그 결과에 대한 책임을 부담합니다. 귀하가 제출, 게재 또는 게시하는 콘텐츠는 본 서비스를 이용하는 타 사용자들에게뿐만 아니라 제3자 서비스 및 웹사이트를 통해 보여질 수 있습니다(귀하의 콘텐츠를 열람하는 사람을 관리하고자 하시는 경우, 계정 설정 페이지로 이동하여 주시기 바랍니다). 귀하는 본 약관에 따라 다른 사람과 공유하여도 불편하지 않은 콘텐츠만을 제공하여야 합니다.
귀하가 맘마상에서 언급하는 내용은 전 세계적으로 실시간으로 보여질 수 있으며, 귀하가 트윗하는 내용이 바로 귀하의 모습입니다!

귀하는 귀하가 맘마와 구속력 있는 계약을 체결할 수 있고 미국 법률이나 기타 적용되는 관할권에 따라 서비스를 제공받는 것으로부터 금지되지 않는 자인 경우에 한해서만 본 서비스를 이용할 수 있습니다. 귀하가 회사, 단체, 정부 또는 기타 실체를 대리하여 본 약관에 동의하고 본 서비스를 이용하는 경우, 귀하는 귀하가 당해 회사, 단체, 정부 또는 실체를 대리하여 본 약관에 동의하고 본 서비스를 이용할 수 있는 권한을 보유하고 있음을 진술 및 보증합니다. 귀하는 오로지 본 약관 및 적용되는 지역∙주∙국가∙국제 법률, 규칙 및 규정을 준수하는 경우에 한해서만 본 서비스를 이용할 수 있습니다.
맘마가 제공하는 본 서비스는 언제든지 진화할 수 있으며, 맘마가 제공하는 본 서비스의 형태 및 성격은 귀하에 대한 사전 통지 없이 수시로 변경될 수 있습니다. 또한, 맘마는 귀하 또는 제반 사용자에 대한 본 서비스(또는 본 서비스에 포함된 특정 기능)의 제공을 (영구적 또는 일시적으로) 중단할 수 있으며, 귀하에게 사전 통지를 제공하지 못할 수도 있습니다. 당사는 또한 당사의 단독 재량에 따라 언제든지 귀하에 대한 사전 통지 없이 이용 및 저장에 대한 제한을 설정할 수 있는 권리를 보유합니다.
본 서비스는 본 서비스상의 콘텐츠나 정보를 대상으로 하는 광고, 본 서비스와 관련하여 제기되는 질의사항이나 기타 정보를 포함할 수 있습니다. 맘마가 본 서비스상에서 행하는 광고의 종류 및 범위는 변경될 수 있습니다. 맘마가 귀하로 하여금 본 서비스에 접근하고 본 서비스를 이용할 수 있도록 하는 데 대한 반대급부로서, 귀하는 맘마, 맘마의 제3자 제공자들 및 파트너들이 본 서비스상에 또는 본 서비스로부터 콘텐츠나 정보를 게시하는 것과 관련하여 (귀하가 제출한 것인지 또는 타 사용자들이 제출한 것인지의 여부를 불문함) 그러한 광고를 게재할 수 있음에 동의합니다.
					</textarea>
					<br>
					<input type="checkbox" id="agree" checked="checked"><span class="font"> 위 내용에 동의합니다.</span>
					<br><br>
					<input type="submit" value="계정 만들기">
				</form>
			</div>
		</div>
	</div>
</body>
</html>